<template>
<div style="background-color: black;">
  <table>
    <!-- <thead> -->
    <tr>
      <!-- v-for 循环数组  footerTableHeader在data的中-->
      <th v-for="i in footerTableHeader" :key="i">{{ i }}</th>
    </tr>
    <!-- </thead> -->
    <!-- <tbody> -->
    <tr>
      <td>指南</td>
      <td>支付方式</td>
      <td>送货政策</td>
      <td>送货政策</td>
      <td>送货政策</td>
      <td>送货政策</td>
    </tr>

    <tr>
      <td>指南</td>
      <td>支付方式</td>
      <td>送货政策</td>
      <td>送货政策</td>
      <td>送货政策</td>
      <td>送货政策</td>
    </tr>

    <tr>
      <td>指南</td>
      <td>支付方式</td>
      <td>送货政策</td>
      <td>送货政策</td>
      <td>送货政策</td>
      <td>送货政策</td>
    </tr>

    <!-- </tbody> -->
  </table>
</div>
</template>

<script>
    export default {
        data() {
            return {
                footerTableHeader: [
                    "订单服务",
                    "服务支持",
                    "自助服务",
                    "其他项目",
                    "友情链接",
                    "关注我吧"
                ]
            };
        }
    };
</script>

<style lang="scss" scoped>
    table {
        font-size: 12px;
        color: white;
        margin: 0 auto;
        tr {
            height: 25px;
        }
        th {
            width: 200px;
            height: 30px;
        }
        td {
            text-align: center;
        }
    }
</style>